<div class="m:gap-4 hidden m:grid js-user-info">
  <% cache "user-profile-sidebar-additional-#{@user.id}-#{@user.github_repos_updated_at}-#{@user.badge_achievements_count}-#{@user.organization_info_updated_at}", expires_in: 2.days do %>
    <% if @user.badge_achievements_count.positive? && @user.badge_achievements_count <= 6 %>
      <%= render partial: "users/badges_area", locals: {
            grouped_badges: @grouped_badges,
            count: @user.badge_achievements_count,
            limit: 6,
            show_heading: true,
            grid_class: "grid-cols-3 s:grid-cols-4 m:grid-cols-2"
          } %>
    <% end %>
    <% if @user.organizations.present? %>
      <div class="crayons-card crayons-card--secondary crayons-layout__content">
        <header class="crayons-card__header">
          <h3 class="crayons-subtitle-3 spec-org-titles"><%= t("views.users.side.org") %></h3>
        </header>
        <div>
          <%# it's unlikely that a user will belong to enough organizations to cause a performance issue here %>
          <%# More info regarding the `.present?/.each` pattern: https://www.speedshop.co/2019/01/10/three-activerecord-mistakes.html %>
          <% @user.organizations.each do |organization| %>
            <a href="/<%= organization.slug %>" class="flex items-center crayons-link crayons-link--contentful">
              <span class="crayons-logo crayons-logo--l mr-2 shrink-0">
                <img src="<%= organization.profile_image_url_for(length: 90) %>" alt="<%= organization.name %> profile image" class="crayons-logo__image" loading="lazy" />
              </span>
              <h4 class="fs-base fw-medium"><%= organization.name %></h4>
            </a>
          <% end %>
        </div>
      </div>
    <% end %>

    <%= render partial: "users/github_repositories_area", locals: { repositories: repositories } %>

  <% end %>

  <% cache "user-profile-sidebar-profile-details-#{@user.id}-#{@user.profile_updated_at}", expires_in: 10.days do %>
    <% @profile.ui_attributes_for(area: :left_sidebar).each do |title, value| %>
      <div class="crayons-card crayons-card--secondary">
        <header class="crayons-card__header">
          <h3 class="crayons-subtitle-3">
            <%= sanitized_sidebar t("views.users.profile_fields.#{title.downcase}", default: title.titleize) %>
          </h3>
        </header>

        <div class="crayons-card__body">
          <%= sanitized_sidebar value %>
        </div>
      </div>
    <% end %>
  <% end %>

  <% cache "user-profile-sidebar-stats-#{@user.id}-#{@user.last_article_at&.rfc3339}-#{@user.last_comment_at&.rfc3339}-#{@user.following_tags_count}-#{@user.last_followed_at&.rfc3339}-#{@user.articles.published.from_subforem.size}", expires_in: 10.days do %>
    <div class="crayons-card crayons-card--secondary p-4">
      <div class="flex items-center mb-4">
        <%= crayons_icon_tag(:post, class: "mr-3 color-base-50", title: t("views.users.side.post.icon")) %>
        <%= t "views.users.side.post.text", count: @user.articles.published.from_subforem.size %>
      </div>
      <div class="flex items-center mb-4">
        <%= crayons_icon_tag(:comment, class: "mr-3 color-base-50", title: t("views.users.side.comment.icon")) %>
        <%= t "views.users.side.comment.text", count: @user.comments.where(deleted: false).size %>
      </div>
      <div class="flex items-center">
        <%= crayons_icon_tag(:tag, class: "mr-3 color-base-50", title: t("views.users.side.tag.icon")) %>
        <%= t("views.users.side.tag.text", count: @user.decorate.cached_followed_tags.size) %>
      </div>
    </div>
  <% end %>
</div>
